<template>
  <div>
    <div class="main">
      <div class="main-head">
        <div class="fanhui">
          <i class="iconfont icon-zuojiantou" @click="fanhui2()"></i>
          <p>云圈</p>
        </div>
        <div class="imgs">
          <img src="yun.png" class="img1" />
          <img src="4.jpg" class="img2" />
        </div>
        <div class="guof">
          <div class="guof1">
            <p class="p1">国风云圈</p>
            <p class="p2">3.7万咕咕 567人在线 ></p>
          </div>
          <div class="jar">加入云圈</div>
          <i class="iconfont icon-gengduo-shuxiang"></i>
        </div>
        <div class="zd">
          <p class="zdp">[置顶]云圈活动#手写国风歌词 &gt;</p>
        </div>
      </div>
      <Gf />
    </div>
  </div>
</template>

<script>
//import { getdata } from "@/api/getlink";

import Gf from "./guof.vue";
export default {
  components: {
    Gf,
  },

  methods: {
    fanhui2() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped>
.main-head {
  height: 3.4rem;
  background: #867945;
  padding-left: 00.35rem;
  padding-right: 0.35rem;
}
.fanhui {
  font-size: 00.36rem;
  color: #fff;
  font-weight: 550;
}
.fanhui > p {
  display: inline-block;
  margin-left: 0.2rem;
  margin-top: 0.2rem;
}
.icon-zuojiantou {
  font-size: 00.36rem;
  color: #fff;
}
.imgs {
  margin-top: 0.57rem;
}
.img1 {
  width: 0.92rem;
  height: 0.92rem;
  border-radius: 0.28rem;
  display: inline-block;
  margin-right: 0.33rem;
}
.img2 {
  width: 1.26rem;
  height: 1.26rem;
  border-radius: 0.32rem;
  display: inline-block;
}
.guof {
  width: 6.84rem;
  height: 1.5rem;
  background-color: #fff;
  border-radius: 00.27rem;
  margin-top: 00.35rem;
  display: flex;
  justify-content: space-around;
  padding-top: 0.3rem;
}
.p1 {
  font-size: 00.33rem;
  color: #4f4b4c;
  margin-bottom: 0.2rem;
}
.p2 {
  font-size: 00.23rem;
  color: #979797;
}
.jar {
  width: 1.48rem;
  height: 0.46rem;
  background-color: #fc383c;
  text-align: center;
  line-height: 00.46rem;
  color: #f6f4f5;
  border-radius: 0.3rem;
}
.icon-gengduo-shuxiang {
  font-size: 00.4rem;
  margin-top: 000.01rem;
}
.zd {
  height: 0.1rem;
  border-top: 0.03rem dashed #fef9ff;
  border-bottom: 0.01rem solid #f9f9f9;
  text-align: center;
  line-height: 00.1rem;
}
.zdp {
  font-size: 0.23rem;
  color: #838383;
  letter-spacing: 0.05rem;
}
</style>